<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/common_jmc.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_icon.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_cart.css"/>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/template.js"></script>
    <script type="text/javascript">
        window._URI_ = {
            IP0: '$!mallBaseurl', // 本地
            IP1: 'http://testmall.yijiahn.com/mall' // 开发环境
        }
        window._URL_ = {
            cartGoodslist: _URI_.IP0 + '/app/cart/goodslist.json', // 购物车列表
            cartUpdate: _URI_.IP0 + '/app/cart/goods/update.json', // 修改商品购物车列表中商品数量
            cartDelete: _URI_.IP0 + '/app/cart/goods/delete.json', // 删除商品购物车
            settlement: _URI_.IP0 + '/app/mcjd/settlement.htm' // 结算
        };
    </script>
</head>
<body style="background:#fafafa;">

    <div id="bxTopbar">
        <div class="bx_topbar">
            <div class="h_44"></div>
            <div class="wp_topbar">
                <div class="it_btn it_back_btn" onclick="javascript:history.back(-1);"><i class="icon ico_1"></i></div>
                <a id="topCartEdit" class="it_btn it_cart_btn" href="javascript:;">编辑</a>
                <div class="it_toptt">购物车</div>
            </div>
        </div>
    </div>

    <div class="bx-cart">
        <div class="wp-cart" id="resCart"></div>

        <div id="resNoData"><div class="no_loaddata"></div></div>
    </div>

    <div>
        <div class="h_56"></div>
        <div id="ftFixedCart" class="ft-fixed-cart clearfix">
            <div class="btn_radio"></div>
            <div class="t_tip1">合计 <b>(不含运费)</b>: </div>
            <div class="t_price">0</div>
            <div class="btn_count">结算(0)</div>
            <div class="btn_del">删除</div>
        </div>
    </div>

    <div class="overlay__bg" style="display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:999999;background:rgba(255,255,255,0.15);"></div>

    <!-- 模板 -->
    <script type="text/html" id="tmplCart">
	{{each data as dataItem ind}}
        <div class="ct_item">
            <div class="it_tt">{{dataItem.store.storeName}}</div>
            {{each dataItem.goodsCartList as item ind}}
            <ul class="ul-cart">
                {{if '0' == item.isEnough}}
                <li class="s__none">
                    <div class="it_sel"></div>
                    <div class="it_tip1">无货</div>
                {{else if '0' != item.goods.goodsStatus}}
                <li class="s__unup">
                    <div class="it_sel"></div>
                    <div class="it_tip1">下架</div>
                {{else}}
                <li>
                    <div class="it_sel"></div>
                    <div class="it_tip1"></div>
                {{/if}}
                    <div class="it_info">
                        <div class="it_info clearfix">
                            <div class="it_img"><img src="{{item.goods.mainPhoto.middlePicUrl}}" /></div>
                            <div class="it_det">
                                <div class="it_name">{{item.goods.name}}</div>
                                <div class="it_price">{{item.goodsPrice}}</div>
                                <div class="it_cals">
                                    <div class="bx-cals fr">
                                        <var class="btn_minus"><span><i class="icon ico_27">-</i></span></var>
                                        <b it_price="{{item.goodsPrice}}" it_goodsSpecInventory="{{item.goodsSpecInventory}}" it_goodsCartId="{{item.goodsCartId}}" class="t_num">
											{{item.goodsCount}}
										</b>
                                        <var class="btn_plus"><span><i class="icon ico_28">+</i></span></var>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            {{/each}}
        </div>
    {{/each}}
    </script>
    <script type="text/html" id="tmplNoData">
        <div class="no_loaddata"></div>
    </script>
    <script type="text/html" id="tmplErrorData">
        <div class="no_errordata">
            <div class="error_refresh_btn"><img src="$!webPath/resources/app/mcjd/images/ico_7.png" width="26" /><p>出错了，点击刷新</p></div>
        </div>
    </script>
    <script type="text/javascript">
        template.helper("getArrNum", function(val){
            var n = val.length || 0;
            return n;
        });
    </script>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/touch.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/imgSetSize.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/utils.js"></script>
    <script type="text/javascript">
    	var _accessToken = "$!accessToken",_orgId="$!orgId";
        jQuery(function($) {

            // 获取购物车列表
            function getCarts() {
                // $('.overlay__bg').show(0);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.cartGoodslist,
                    headers: {
                    },
                    data: {
                    	accessToken: _accessToken,
                    	orgId: _orgId
                    },
                    success: function(res) {
                        $('.overlay__bg').hide(0);
                        if ("100" === res.code) { //请求成功
                            var html = template('tmplCart', res);
                            $('#resCart').html(html);
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错: ' + _URL_.goodsDetailById);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错: ' + _URL_.goodsDetailById);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            // 修改数量
            function updateCarts(_goodsCartId, _goodsCount, _tNum) {
                $('.overlay__bg').show(0);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.cartUpdate,
                    headers: {},
                    data: {
                    	accessToken: _accessToken,
                    	orgId: _orgId,
                        goodsCartId: _goodsCartId,
                        goodsCount: _goodsCount
                    },
                    success: function(res) {
                        $('.overlay__bg').hide(0);
                        if ("100" === res.code) { //请求成功
                            Utils.showToast(res.msg || '修改商品数量成功');
                            _tNum.html(_goodsCount);

                            calsCarts();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错: ' + _URL_.cartUpdate);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错: ' + _URL_.cartUpdate);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            // 删除购物车
            function delCarts() {
                var _goodsCartIds = "";
            	var selectedCarts = $(".it_sel.s__checked");
                if(selectedCarts && selectedCarts.length > 0){
	                for(var i = 0; i < selectedCarts.length; i++){
	                	var cart = selectedCarts.eq(i).siblings(".it_info").find(".t_num");
	                	var goodsCartId = cart.attr('it_goodsCartId');
	                	if(i == 0){
	                		_goodsCartIds = goodsCartId;
	                	}else{
	                		_goodsCartIds = _goodsCartIds + "," + goodsCartId;
	                	}
	                }
                }
                if(_goodsCartIds == ""){
                    Utils.showToast("请先选择要删除的购物车");
                	return;
                }

                $('.overlay__bg').show(0);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.cartDelete,
                    headers: {},
                    data: {
                    	accessToken: _accessToken,
                    	orgId: _orgId,
                    	goodsCartIds: _goodsCartIds
                    },
                    success: function(res) {
                        $('.overlay__bg').hide(0);
                        if ("100" === res.code) { //请求成功
                            Utils.showToast(res.msg || '删除商品购物车成功');
                            location.reload();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错: ' + _URL_.cartDelete);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错: ' + _URL_.cartDelete);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            // 计算总价
            function calsCarts() {
                var _ac = 0, _an = 0, _lis = $('#resCart').find('li');
                $('#ftFixedCart .t_price').text('0');
                _lis.each(function(index, el) {
                    var _radio = $(this).find('.it_sel').eq(0);
                    if(_radio.hasClass('s__checked')) {
                        var t_num = $(this).find('.t_num').eq(0);
                        var _n = t_num.text(),
                            _p = t_num.attr('it_price');
                        _an += 1;
                        _ac += Number(_n) * parseFloat(_p);
                    }
                });
                $('#ftFixedCart .t_price').text(_ac.toFixed(2));
                $('#ftFixedCart .btn_count').text('结算 ( '+_an+' )');
            };
            // 结算
            function settlementCarts(){
            	var selectedCarts = $(".it_sel.s__checked");
                if(selectedCarts && selectedCarts.length > 0){
	                var _goodsCartIds = "";
	                for(var i = 0; i < selectedCarts.length; i++){
	                	var cart = selectedCarts.eq(i).siblings(".it_info").find(".t_num");
	                	var goodsCartId = cart.attr('it_goodsCartId');
	                	if(i == 0){
	                		_goodsCartIds = goodsCartId;
	                	}else{
	                		_goodsCartIds = _goodsCartIds + "," + goodsCartId;
	                	}
	                }
	                location.href = _URL_.settlement + "?accessToken="+_accessToken +"&orgId="+_orgId +"&goodsCartIds="+_goodsCartIds;
                }else{
                	alert("请先选择要结算的购物车");
                }
            }
            // 顶部编辑--编辑、完成
            $('#topCartEdit').on('click', function() {
                if($('#ftFixedCart').hasClass('s__edit')) {
                    $(this).text('编辑');
                    $('#ftFixedCart').removeClass('s__edit');
                    calsCarts();
                }else {
                    $(this).text('完成');
                    $('#ftFixedCart').addClass('s__edit');
                }
            });

            // 操作列表--单选、加减、
            $('#resCart').on('tap', '.it_sel', function() {
                var _bx = $('#resCart');
                var _li = $(this).parents('li').eq(0);
                if(!_li.hasClass('s__none') && !_li.hasClass('s__unup')) {
                    if($(this).hasClass('s__checked')) {
                        $(this).removeClass('s__checked');
                    }else {
                        $(this).addClass('s__checked');
                    }
                    var _ft_btnRadio = $('#ftFixedCart').find('.btn_radio');
                    if(_bx.find('.s__checked') && _bx.find('.s__checked').length > 0) {
                        _ft_btnRadio.addClass('s__checked');
                    }else {
                        _ft_btnRadio.removeClass('s__checked');
                    }
                    calsCarts();
                }
            }).on('tap', '.btn_minus', function() {
                var _li = $(this).parents('li').eq(0);
                if(!_li.hasClass('s__none') && !_li.hasClass('s__unup')) {
                    var t_num = $(this).siblings('.t_num').eq(0);
                    var _v = t_num.text();
                    var _cv = Number(_v) <= 1 ? 1 : (Number(_v) - 1);
                    if(_v != _cv) {
                       var goodsCartId = t_num.attr('it_goodsCartId');
                       updateCarts(goodsCartId, _cv, t_num);
                    }
                }
            }).on('tap', '.btn_plus', function() {
                var _li = $(this).parents('li').eq(0);
                if(!_li.hasClass('s__none') && !_li.hasClass('s__unup')) {
                    var t_num = $(this).siblings('.t_num').eq(0);
                    var _v = t_num.text();
                    var _xv = t_num.attr('it_goodsSpecInventory') || 1;
                    var _cv = Number(_v) < 1 ? 1 : (1 + Number(_v));
                    _cv = Number(_cv) >= Number(_xv) ? Number(_xv) : Number(_cv);
                    if(_v != _cv) {
                       var goodsCartId = t_num.attr('it_goodsCartId');
                       updateCarts(goodsCartId, _cv, t_num);
                    }
                }
            });

            // 操作底部--单选、删除、结算
            $('#ftFixedCart').on('tap', '.btn_radio', function() {
                var _bx = $('#resCart');
                var _ft_btnRadio = $('#ftFixedCart').find('.btn_radio');
                var _lis = _bx.find('li');

                var _fg;
                if(_ft_btnRadio.hasClass('s__checked')) {
                    _fg = false;
                    _ft_btnRadio.removeClass('s__checked');
                }else {
                    _fg = true;
                    _ft_btnRadio.addClass('s__checked');
                }
                if(!_fg) {
                    _lis.find('.it_sel').removeClass('s__checked');
                }else {
                    _lis.each(function(index, el) {
                        if(!$(this).hasClass('s__none') && !$(this).hasClass('s__unup')) {
                            $(this).find('.it_sel').addClass('s__checked');
                        }
                    });
                }
                calsCarts();
            }).on('tap', '.btn_del', function() {
                delCarts();
            }).on('tap', '.btn_count', function() {
            	settlementCarts();
            });
            
        	getCarts();
        });
    </script>

</body>
</html>